<template>
  <div class="user_guide_content">
    <div class="content relative">
      <div v-if="[1, 2].includes(newUserGuideStep || 0)" class="left_arrow" />
      <div v-else-if="newUserGuideStep === 3" class="bottom_arrow" />
      <div v-if="newUserGuideStep === 1" class="text">
        Pick a favorite creation model, enter your prompt or upload your image, and click Generate
        to get the design. And then you can post it to community for joining nex.
      </div>
      <div v-else-if="newUserGuideStep === 2" class="text">
        There are many creative design contest here, where you can participate and have the
        opportunity to receive cash rewards and prizes.
      </div>
      <div v-else-if="newUserGuideStep === 3" class="text">
        Here are the designs published by community creators. You can leave comments and support
        your favorite creations through joining nex.
      </div>
      <div class="flex_row_s">
        <img
          class="icon_img"
          v-if="newUserGuideStep === 1"
          src="https://imgs.nexbie.com/uploads/ea292c2e54824b2ab2c9abc0f92bfa66.webp"
          alt="" />
        <img
          class="icon_img"
          v-else-if="newUserGuideStep === 2"
          src="https://imgs.nexbie.com/uploads/b201b42e1047471bae7f6cad1e63fafe.webp"
          alt="" />
        <img
          class="icon_img"
          v-else-if="newUserGuideStep === 3"
          src="https://imgs.nexbie.com/uploads/879b2e5541de4896ae2628e4080076ca.webp"
          alt="" />
        <div @click="gotIt" v-hover-gradient class="btn cursor-pointer mt-[16px] mb-[16px]">
          Got it
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store/user';
  const userStore = useUserStore();
  const newUserGuideStep = computed(() => userStore.newUserGuideStep);

  const gotIt = () => {
    const step = newUserGuideStep.value === 3 ? '' : newUserGuideStep.value + 1;
    userStore.setNewUserGuideStep(step);
  };
</script>

<style scoped lang="scss">
  .user_guide_content {
    display: flex;
    justify-content: center;
    .left_arrow {
      position: absolute;
      left: -8px;
      top: 50px;
      width: 0;
      height: 0;
      /* 右侧边框可见，其他方向边框透明 */
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid #fff; /* 三角形颜色 */
    }
    .bottom_arrow {
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translate(0, -50%);
      width: 0;
      height: 0;
      /* 右侧边框可见，其他方向边框透明 */
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff; /* 三角形颜色 */
    }
    .content {
      background: #fff;
      display: flex;
      padding: 16px 16px 0 16px;
      flex-direction: column;
      align-items: center;
      border-radius: 8px;
      width: 428px;
    }
    .text {
      border-radius: 8px;
      background: #f9f0eb;
      color: var(---9, #222);
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 150%; /* 24px */
      padding: 8px 16px;
    }
    .flex_row_s {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .btn {
      align-self: flex-start;
      display: flex;
      width: 80px;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .icon_img {
      width: 56px;
      height: 56px;
    }
  }
</style>
